<template>
  <span class="inline-flex items-center align-mid">
    {{ modelValue.fieldText }}
    <el-popover placement="bottom" v-if="modelValue.fieldType === 'input'" :visible="visible">
      <template #reference>
        <el-icon class="cursor-pointer" :color="query.fieldValue ? '#409EFF' : ''" @click.stop="popoverChange()">
          <Search />
        </el-icon>
      </template>
      <template #default>
        <el-row>
          <el-input :size="'small'" clearable v-model="query.fieldValue" />
        </el-row>
        <el-row>
          <el-button :size="'small'" @click.stop="cancel()">重置</el-button>
          <el-button :size="'small'" type="primary" @click="searchQuery()">确定</el-button>
        </el-row>
      </template>
    </el-popover>
    <el-popover placement="bottom" width="auto" popper-style="min-width: 10px;" :visible="visible"
      v-else-if="modelValue.fieldType === 'radio' || modelValue.fieldType === 'checkbox'">
      <template #reference>
        <el-icon class="cursor-pointer" :color="query.fieldValue.length > 0 ? '#409EFF' : ''"
          @click.stop="popoverChange()">
          <ArrowDown />
        </el-icon>
      </template>
      <template #default>
        <el-scrollbar>
          <el-checkbox-group v-model="query.fieldValue" class="flex flex-col">
            <el-checkbox v-for="item in modelValue.options" :label="item.label" :value="item.value"
              class="filter-checkbox" />
          </el-checkbox-group>
        </el-scrollbar>
        <el-button :size="'small'" @click.stop="cancel()">重置</el-button>
        <el-button :size="'small'" type="primary" @click="searchQuery()">确定</el-button>
      </template>
    </el-popover>
  </span>
</template>

<script setup lang="ts">
import { DesignQuerySearch } from '@/api/design/designInstance';
import { DesignListTableConfig } from '@/components/DesignList';

const modelValue = defineModel<DesignListTableConfig>();

const query = defineModel<DesignQuerySearch>("query");

const emits = defineEmits(['query']);

const visible = ref(false);
const popoverChange = () => {
  visible.value = !(visible.value);
}

const cancel = () => {
  visible.value = !(visible.value);
  if (Array.isArray(query.value.fieldValue)) {
    query.value.fieldValue = [];
  } else {
    query.value.fieldValue = null;
  }
  emits('query');
}

const searchQuery = async () => {
  visible.value = !(visible.value);
  emits('query');
}
</script>

<style lang="scss" scoped>
:deep(.filter-checkbox) {
  margin-left: auto;
  margin-right: auto;
}
</style>
